<template>
    <div>
        <h1>子组件</h1>

        <h2>{{info}}</h2>
        <h3>{{obj}}</h3>
        <h3>{{$attrs.msg}}</h3>
        <button @click="pinchuan">呜呜</button>
        <h3>{{msg1}}</h3>
        <GrandSon></GrandSon>

    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import GrandSon from "./GrandSon.vue"

export default defineComponent({
    components:{
        GrandSon,
    },
    props:["info","obj"],
    emits:["fun"],
    setup (props,context) {
        console.log(props);
        console.log(props.info);
        

        console.log(props.obj);     
        
        console.log(context);
        console.log(context.attrs);
        console.log(context.attrs.msg);

        const msg = context.attrs;

        console.log(msg);
        const msg1 = ref(context.attrs.msg)
        
        // const {info,obj} = {
        //     info:"props.info",
        //     obj:"props.obj"
        // }
        // console.log(info,obj);


        function pinchuan(){
            context.emit("fun","大家楼来吃啊")
        }

        return {
            msg,
            msg1,
            pinchuan,
        }
    }
})
</script>

<style scoped>

</style>